<template>
  <div class="products-video">
    <Header></Header>
    <div class="headers">
      <div>
          <img src="../../../static/img/logo_1.png" alt="">
      </div>
      <h3>产品功能展示视频</h3>
    </div>
    <div class="content">
      <ul>
        <li v-for="(productVideoLists, index) in productVideoList" :key="index">
          <div>
            <router-link :to="{name:'VideoPage',params:{id:productVideoLists.id}}">
              <img :src="productVideoLists.cover" alt="" class="image-1">
              <img src="../../../static/img/btn-bofang.png" alt="" class="image-2">
            </router-link> 
          </div>
          <H4>
              <router-link :to="{name:'VideoPage',params:{id:productVideoLists.id}}">{{productVideoLists.title}}</router-link> 
          </H4>
        </li>
      </ul>
    </div>
    <p>已经到最后了</p>
    <Footer></Footer>
    <Interactive></Interactive>
  </div>
</template>
<script>
import Header from './components/Header'
import Footer from '../home/components/Footer'
import Interactive from '../interactive/Interactive'
export default {
  name: 'ProductVideo',
  data(){
      return {
        productVideoList: [],
        totalList:null
      }
  },
  components: {
      Header,
      Footer,
      Interactive
  },
  created(){
    this.axios.get('/articles/index',{
      params: {
        category:3,
        per_page: this.totalList,
        page:1
      }
    })
    .then((res) => {
      this.productVideoList = res.data.data;
      this.totalList = res.data.meta.pagination.total
      console.log(res.data.data);
    })
    .catch((error) => {
      console.log(error);
    })
  }
}
</script>
<style scoped>
.products-video{
  width: 100%;
  height: auto;
}
.products-video .headers{
  width: 100%;
  height: .6rem;
  background-color: #1d2977;
  line-height: .6rem;
}
.products-video .headers div{
  width: .53rem;
  height: .53rem;
  float: left;
  margin-left: .2rem;
}
.products-video .headers div img{
  width: 100%;
  height: auto;
}
.products-video .headers h3{
  font-size: .3rem;
  color: #fff;
  float: left;
  font-weight: bold;
}
.products-video .content{
  width: 100%;
  height: auto;
}
.products-video .content ul li{
  width: 3.34rem;
  height: 2.42rem;
  display: inline-block;
  margin-left: .32rem;
  text-align: center;
  margin-top: .3rem;
}
.products-video .content ul li div{
  width: 3.17rem;
  height: 1.83rem;
  position: relative;
}
.products-video .content ul li div .image-1{
  width: 100%;
  height: auto;
}
.products-video .content ul li div .image-2{
  width: .6rem;
  height: .6rem;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.products-video .content ul li h4{
  font-size: 14px;
  color: #333;
  height: .4rem;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}
.products-video p{
  width: 100%;
  height: auto;
  text-align: center;
  font-size: .26rem;
  color: #1d2977;
  margin-top: .49rem;
  margin-bottom: .9rem;
}
</style>
